.cover-container {
  width: 100%;
  height: 280rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;

  image {
    width: 100%;
    height: 100%;
  }
}

.my-page-container {
  width: 100%;
  height: fit-content;
  min-height: 100vh;
  padding: 0 30rpx 100rpx 30rpx;
  background-color: rgba(245, 245, 245, 0.9);
  backdrop-filter: blur(20rpx);

  .user-info-container {
    width: 100%;
    height: 240rpx;
    display: flex;
    flex-direction: column;

    .user-info_row {
      width: 100%;
      height: 50%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;

      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        background-color: #e2e2e2;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .username {
        width: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 30rpx;

        &>text {
          padding-bottom: 14rpx;
          font-size: 36rpx;
          font-weight: bold;
        }

        .user-page-btn {
          width: fit-content;
          //padding: 2rpx 24rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          font-size: 24rpx;
          //background-color: #e2e2e2;
          //border-radius: 30rpx;

          .fas {
            margin-left: 10rpx;
          }
        }
      }

      .user-info_column {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .content {
          font-size: 32rpx;
          font-weight: bold;
        }

        .title {
          padding-top: 12rpx;
          font-size: 24rpx;
          color: #888;
        }
      }

      .divider {
        width: 2rpx;
        height: 50%;
        flex-shrink: 0;
        background-color: #e2e2e2;
      }

      &:last-child {
        margin-top: 26rpx;
      }
    }
  }

  .user-login-container {
    width: 100%;
    height: 240rpx;
    padding: 0 30rpx;
    display: flex;
    flex-direction: column;

    .login-tips {
      width: 100%;
      display: flex;
      flex-direction: column;

      .tips_title {
        margin-bottom: 12rpx;
        font-size: 40rpx;
        font-weight: bold;
      }

      .tips_desc {
        font-size: 26rpx;
        color: #555;
      }
    }

    .login-btn {
      width: fit-content;
      height: fit-content;
      margin: 30rpx 0;
      padding: 20rpx 50rpx;
      border-radius: 50rpx;
      background-color: #f4756b;
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
    }
  }

  .horizontal-btn-container {
    width: 100%;
    height: 200rpx;
    margin: 20rpx 0;
    padding: 20rpx 40rpx;
    border-radius: 30rpx;
    background-color: #fff;
    color: #555;

    .title {
      width: 100%;
      margin-bottom: 30rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }

    .btn-group {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;

      .btn {
        width: 80rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        white-space: nowrap;

        .far {
          margin-bottom: 14rpx;
          font-size: 38rpx;
        }

        text {
          font-size: 26rpx;
        }
      }
    }
  }

  .vertical-btn-container {
    width: 100%;
    height: fit-content;
    margin: 30rpx 0;
    padding: 20rpx 40rpx;
    border-radius: 30rpx;
    background-color: #fff;

    .btn_row {
      width: 100%;
      min-height: 100rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: nowrap;
      font-size: 30rpx;

      .btn_title {
        display: flex;
        flex-direction: row;
        flex-shrink: 0;
        align-items: center;
        font-size: 28rpx;
        color: #555;

        .fas, .far {
          width: 50rpx;
          margin-right: 20rpx;
          font-size: 42rpx;
        }
      }

      .btn_angle-icon {
        display: flex;
        flex-direction: row;
        margin-left: auto;

        .fas {
          font-size: 30rpx;
          color: #aaa;
        }
      }
    }

    button {
      padding: 0;
      background-color: transparent;
      border-radius: 0;
      line-height: unset;

      &::after {
        border: none;
      }
    }
  }
}